<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>民主评测</title>
    <script src="static/vue.js"></script>
    <script src="static/vue-router.js"></script>
    <script src="static/axios.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .header {
            height: 60px;
            background-color: rgba(0, 40, 77, 1);
        }

        .container {
            display: flex;
            flex: 1;
        }

        .container .left {
            width: 280px;
            background-color: rgba(0, 21, 41, 1);
        }
        .leftli{
            vertical-align: center;
            margin-top: 20px;
        }
        .leftli img{
            width: 25px;
            height: 25px;
        }
        .leftli{
            font-size: 20px;
        }
        .left img:nth-child(1){
            margin-left: 10px;
        }
        .left span{
            margin: 0 10px;
        }
        .container .right {
            flex: 1;
            background-color: #f2f2f2;
            padding: 20px;
        }

        .content {
            width: 100%;
            height: 100%;
            background-color: #fff;
            /*overflow: hidden;*/
            border: 1px solid transparent;

        }

        .title {
            font-size: 22px;
            color: #fff;
            line-height: 60px;
            margin-left: 26px;
            display: inline-block;
        }

        .header .right {
            float: right;
            height: 60px;
        }

        .header .exit {
            font-size: 14px;
            color: #fff;
            line-height: 60px;
            cursor: pointer;
            margin-right: 16px;
        }

        .header .username {
            color: #fff;
            cursor: pointer;
            margin-right: 25px;
        }

        .touxiang {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #fff;
            position: relative;
            border-radius: 50%;
            top: 12px;
            left: -8px;
            cursor: pointer;
        }

        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;

        }

        .menu-title {
            color: #fff;
        }

        .menu-sub-title {
            color: #aeaeae;
        }
        .container{
            width: 100%;
        }
        .content1{
            width: 145px;
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            color: #FFFFFF;
            border-radius: 4px;
            background-color: rgba(24, 144, 255, 1);
            margin-top: 50px;
            margin-right: 20px;
            text-align: center;
            float: right;

        }
        .content2{
            margin: 0 auto;
            width: 95%;
            margin-top: 200px;
        }
        .content2 table{
            width: 100%;
            margin: 0 auto;
            border-collapse: collapse;
        }
        .content2 tr {
            width: 100%;
            height: 54px;
            border-bottom: 1px solid rgba(232, 232, 232, 1);

        }

        .content2 td:nth-child(1){
            padding-left: 20px;

        }
        .content2 td:nth-child(2){
            padding-left: 20px;

        }
        .content2 td:nth-child(3){
            padding-left: 50px;

        }
        .content2 td:nth-child(4){
            padding-left: 200px;

        }
        .content2 td:nth-child(5){
            padding-left: 200px;

        }

        .tr1 {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.847058823529412);
            font-weight: 700;
            background-color: rgba(250, 250, 250, 1);
        }

        .tr2 {
            font-weight: 400;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.647058823529412);
        }
        .tr2 span{
            font-size: 14px;
            color: #1890FF;
        }
        .tr2 span:nth-child(1){

        }
        .tr2 span:nth-child(2){
            margin-left: 10px;
        }
        .tr2 span:nth-child(3){
            margin-left: 10px;
        }

    </style>
</head>
<body>
<div id="app">
    <div class="header">
        <div class="title">
            厦门市思明区人民法院投票系统
        </div>
        <div class="right">
                <span class="touxiang">
                    <img class="center" :src="logo" alt="" width="46" height="46">
                </span>
            <span class="username">{{username}}</span>
            <span class="exit">退出</span>
        </div>
    </div>
    <div class="container">
        <div class="left">
            <ul>
                <li v-for="(item,index) in menu">
                    <div @click="subshow(index)" class="leftli">
                        <img src="tpimg/u9.png" alt="">
                        <span class="menu-title">{{item.title}}</span>
                        <img v-if="item.children && item.children.length != 0" src="tpimg/u17.png" alt="">
                    </div>
                    <ul v-if="item.children_show">
                        <li v-for="child in item.children" class="menu-sub-title">
                            {{child.title}}
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="right">
            <div class="content">
                <div class="content1">
                    创建模板
                </div>
                <div class="content2">
                    <table>
                        <tr class="tr1">
                            <td></td>
                            <td></td>
                            <td>模板标题</td>
                            <td>生成日期</td>
                            <td>操作</td>
                        </tr>
                        <tr class="tr2" v-for="(item,index) in pclist">
                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.name1}}</td>
                            <td>{{item.name2}}</td>
                            <td>
                                <span>统计</span>
                                <span>查看</span>
                                <span>{{item.name3}}</span>
                                <span>删除</span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <!--------------------------------------------------->
        </div>

    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            username: "admin",
            logo: 'tpimg/u59.png',
            menu: [

            ],
            pclist:[

            ]
        },
        methods: {
            subshow(index) {
                this.menu[index].children_show = !this.menu[index].children_show;
            }
        },
        created() {
            var _this = this;
            axios.post(
                'https://mockapi.eolinker.com/xx3S3Ha118800c38fa6132a898e6ee4aabb33b7b96a3587/index?index=1'
            ).then(function (res) {
                _this.username = res.data.username;
                _this.logo = res.data.logo;
            });
            axios.post('https://mockapi.eolinker.com/xx3S3Ha118800c38fa6132a898e6ee4aabb33b7b96a3587/liebiao?list=1')
                .then(function (res) {
                    _this.menu = res.data;
                })
            axios.post(axios.post('https://mockapi.eolinker.com/QKFzpPie12753a5caf17c53254224a3b134cd154e66c2e9/mzpc?id=1')
                .then(function (res) {
                    _this.pclist = res.data;
                }))

        }
    })
</script>
</html>